<template>
  <view>
   
    <uni-card>
      <view style="display: flex; justify-content: space-between">
        <view style="display: flex; align-items: center; margin-bottom: 20px">
          <image
            style="width: 30px; height: 30px"
            class="controls-play img"
            :src="Gedata.logo"
          ></image>
          <text style="margin-left: 20px"> {{ Gedata.name }}</text>
        </view>
        <view>
          <uni-dateformat :date="Gedata.time"></uni-dateformat>
        </view>
      </view>
      <view>
        <text style="font-size: 18px; color: #000">{{ Gedata.title }}</text>
        <p
          style="
            font-size: 16px;
            width: 100%;
            margin-top: 10px; /* 防止文本换行 */
          "
        >
   {{ Gedata.content }}
        </p>
        <view style="width: 100%; height: 1px; background-color: #666;
        
        margin: 20px 0;"></view>
        <p style=" color: #000; font-size: 18px;margin-bottom: 10px;">{{xiangdata.xunhuan.length}}条评论</p>
        
      <view v-for="(item,index) in xiangdata.xunhuan" :key="item.id">

<view style="display: flex; align-items: center; margin-bottom: 20px">
  <image
    style="width: 30px; height: 30px"
    class="controls-play img"
    :src="item.logo"
  ></image>
  <text  style="margin-left: 20px;font-size: 14px;color: #000;">{{ item.name }}:</text>
  <text>{{ item.text }}</text>
</view>
      </view>
      </view>
    </uni-card>
<view style="position: fixed;
bottom: 20px;width: 100%;">
  
  <text style="color: #666; font-size: 14px;margin-left: 10px;">添加评论...</text>
  <view style="
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #029d94;
    
    height: 60px;
     border-radius: 4px;">

 <view style="height: 40px; width: 90%;">
  <uni-forms  ref="form" :modelValue="data.formData" :rules="data.rules">
        <uni-forms-item label="" name="title">
          <input
          style="border: 1px solid #fff;
          background-color: #fff;
          border-radius: 4px;
          height: 40px;"
          @input="bian"
          :confirm-hold="shou"
          confirm-type="send" 
            class="input"
            @confirm.prevent="wancheng"
            type="text"
            v-model="data.formData.title"
            placeholder="请输入内容"
          />
        </uni-forms-item>
       
      </uni-forms>
 </view>
  </view>
</view>
  
  </view>
</template>

<script lang="ts" setup>
import {
  onMounted,
  ref,
  reactive,
  
  getCurrentInstance,
  toRefs,
  computed
} from "vue";
import {useCounterStore} from "../../stores/counter";
import{xtngtao,getlunx} from '../../api/login'
const counter = useCounterStore();
// 一个计算属性 ref
const token = computed(() => {
  return counter.token;
});

let user: any = computed(() => {
  return counter.user;
});
const shou =ref(true)
const form:any =ref(null)

const bian=()=>{
    
if(data.formData.title.length){
  shou.value=false
}else{
  shou.value=true
}
}

const getluns=async()=>{

  console.log(xiangdata);
  
const {data}=await getlunx(xiangdata.Gedata.id)


xiangdata.xunhuan=data.data


}

const wancheng=()=>{
  if(data.formData.title.length){
  shou.value=false

  data.formData.id =
        Math.floor(Math.random() * (1000000000 - 10000 + 1)) + 10000;
      user.value.logo
        ? (data.formData.logo = user.value.logo)
        : (data.formData.logo =
            "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0");
      user.value.name
        ? (data.formData.name = user.value.name)
        : (data.formData.name = "微信用户");
        data.formData.lunid= xiangdata.Gedata.id
        xtngtao(data.formData).then((res:any)=>{
          data.formData.title=''
          getluns()
        })

}else{
  uni.showToast({
	title: '内容为空！',
  icon:"error",
	duration: 500
});
}

  
if(data.formData.title.length){
  shou.value=false
}else{
 
}
  

}
const xiangdata:any = reactive({
  xunhuan:[],
  Gedata: {
    content: "zzzzzzzzzzzz",
    id: 688588059,
    logo: "http://tmp/YpWFwKsYaUUXcf676ace0a1ded5678a083c4df52f065.jpeg",
    luncol: null,
    name: "青铜时代",
    time: "2024-03-09T03:50:24.000+00:00",
    title: "zzzzzzzz",
  },
  // / 表单数据

},



);

const data: any = reactive({
  // 表单数据
  formData: {
    title: "",
    content: "",
    time: new Date(),
  },
  rules: {
    // 对name字段进行必填验证
    name: {
      rules: [
        {
          required: true,
          errorMessage: "请输入标题",
        },
        {
          minLength: 3,
          maxLength: 20,
          errorMessage: "标题太短啦",
        },
      ],
    },
    // 对email字段进行必填验证
    email: {},
  },
});
let vlaue=ref('')
const {Gedata}=toRefs(xiangdata)


onMounted(() => {
  const instance = getCurrentInstance()?.proxy;
  // @ts-ignore
  const eventChannel = instance.getOpenerEventChannel();
  eventChannel.on("acceptDataFromOpenerPage", function (data: any) {
    xiangdata.Gedata=data

    console.log(xiangdata);
    getluns()
  });
 
});


</script>

<style scoped></style>
